<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/photoswipe.css"/>
    <title>建议反馈</title>
</head>
<body>
<div id="feedback">
    <div class="feedTitle">反馈问题的类型</div>
    <div class="feedTips">
        <span>服务态度</span>
        <span>菜品质量</span>
        <span class="on">店内卫生</span>
        <span>其他因素</span>
    </div>
    <form id="upPic" enctype="multipart/form-data">
        <textarea name="content" class="content"></textarea>
        <div id="photo">
            <!--    照片添加    -->
            <div class="z_photo">
                <div class="z_file">
                    <input type="file" name="file[]" id="file" value="" accept="image/*" multiple
                           onchange="imgChange('z_photo','z_file');"/>
                </div>
                <div class="quanbox" >最多可上传三张图片</div>
            </div>
            <!--遮罩层-->
            <div class="z_mask">
                <!--弹出框-->
                <div class="z_alert">
                    <p>确定要删除这张图片吗？</p>
                    <p>
                        <span class="z_cancel">取消</span>
                        <span class="z_sure">确定</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="m_button_row" style="bottom: 0;">
            <button type="button" class="zc_btn" value="提交"
                    onclick="submitPic()">提交
            </button>
        </div>
    </form>
</div>
<script type="text/javascript">
    function imgChange(obj1, obj2) {
        $('.quanbox').hide(100)
        //获取点击的文本框50
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件


        var tolength=$('.z_photo .z_addImg').length;
        if (tolength <= 2) {
            console.log(111)
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(file.files[i]);
                imgArr.push(imgUrl);
                var img = document.createElement("img");
                img.setAttribute("src", imgArr[i]);
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "z_addImg");
                imgAdd.appendChild(img);
                imgContainer.appendChild(imgAdd);
            }
        } else{
            console.log('超出3张')
            alert('最多只能上传3张')
            i=2;
        }
        ;
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function () {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function () {
                    mask.style.display = "none";
                };
                sure.onclick = function () {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        }
        ;
    };
</script>
</body>
</html>
